استاد: امیر عسگری چناقلو ترم دوم درس طراحی صفحات وب

Size: px

Start display at page:

Download "استاد: امیر عسگری چناقلو ترم دوم درس طراحی صفحات وب"

Ethan Gilbert
5 years ago
Views:

1 استاد: امیر عسگری چناقلو ترم دوم درس طراحی صفحات وب 1

2 2 Definition and Usage The comment tag is used to insert comments in the source code. Comments are not displayed in the browsers. You can use comments to explain your code, which can help you when you edit the source code at a later date. This is especially useful if you have a lot of code.

3 3 Example An HTML comment:  <p>this is a paragraph.</p>

4 4 Browser Support Differences Between HTML 4.01 and HTML5 NONE.

5 Tips and Notes You can also use the comment tag to "hide" scripts from browsers without support for scripts (so they don't show them as plain text): <script type="text/javascript">  </script> Note: The two forward slashes at the end of comment line (//) is the JavaScript comment symbol. This prevents JavaScript from executing the --> tag. امیر عسگری چناقلو درس طراحی صفحات وب 5

6 6 Standard Attributes The comment tag does not support any standard attributes. Event Attributes The comment tag does not support any event attributes.

7 7 Definition and Usage The <!DOCTYPE> declaration must be the very first thing in your HTML document, before the <html> tag. The <!DOCTYPE> declaration is not an HTML tag; it is an instruction to the web browser about what version of HTML the page is written in. In HTML 4.01, the <!DOCTYPE> declaration refers to a DTD, because HTML 4.01 was based on SGML. The DTD specifies the rules for the markup language, so that the browsers render the content correctly. HTML5 is not based on SGML, and therefore does not require a reference to a DTD. Tip: Always add the <!DOCTYPE> declaration to your HTML documents, so that the browser knows what type of document to expect.

8 8 Example <!DOCTYPE html> <html> <head> <title>title of the document</title> </head> <body> The content of the document... </body> </html>

9 9 Browser Support Differences Between HTML 4.01 and HTML5 There are three different <!DOCTYPE> declarations in HTML In HTML5 there is only one: <!DOCTYPE html>

10 Common DOCTYPE Declarations HTML 5 <!DOCTYPE html> HTML 4.01 Strict This DTD contains all HTML elements and attributes, but does NOT INCLUDE presentational or deprecated elements (like font). Framesets are not allowed. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" " HTML 4.01 Transitional This DTD contains all HTML elements and attributes, INCLUDING presentational and deprecated elements (like font). Framesets are not allowed. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" " HTML 4.01 Frameset This DTD is equal to HTML 4.01 Transitional, but allows the use of frameset content. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" " 10

11 Definition and Usage The <a> tag defines a hyperlink, which is used to link from one page to another. The most important attribute of the <a> element is the href attribute, which indicates the link's destination. By default, links will appear as follows in all browsers: An unvisited link is underlined and blue A visited link is underlined and purple An active link is underlined and red 11

12 Example A link to W3Schools.com: <a href=" W3Schools.com!</a> 12

13 Browser Support 13 Tips and Notes Tip: The following attributes: download, hreflang, media, rel, target, and type cannot be present if the href attribute is not present. Tip: A linked page is normally displayed in the current browser window, unless you specify another target.

14 Attributes Attribute Value Description charset char_encoding Not supported in HTML5. Specifies the character-set of a linked document coords coordinates Not supported in HTML5. Specifies the coordinates of a link download filename Specifies that the target will be downloaded when a user clicks on the hyperlink href URL Specifies the URL of the page the link goes to hreflang language_code Specifies the language of the linked document media media_query Specifies what media/device the linked document is optimized for name section_name Not supported in HTML5. Use the global id attribute instead. Specifies the name of an anchor rel alternate author bookmark external help license next nofollow noreferrer noopener prev search tag rev text Not supported in HTML5. Specifies the relationship between the linked document and the current document shape target default rect circle poly _blank _parent _self _top framename Not supported in HTML5. Specifies the shape of a link Specifies where to open the linked document type media_type Specifies the media type of the linked document 14

15 Example Download file when clicking on the link (instead of navigating to the file): <a href="/images/myw3schoolsimage.jpg" download> Syntax <a download="filename"> Attribute Values Value Description 15 More Examples Example filename Optional. Specifies the new filename for the downloaded file Specify a value for the download attribute, which will be the new filename of the downloaded file ("w3logo.jpg" instead of "myw3schoolsimage.jpg"): <a href="/images/myw3schoolsimage.jpg" download="w3logo">

16 Example The href attribute specifies the link's destination: <a href=" W3Schools</a> Syntax <a href="url"> Attribute Values Value URL Description The URL of the link.possible values: An absolute URL - points to another web site (like href=" ") A relative URL - points to a file within a web site (like href="default.htm") Link to an element with a specified id within the page (like href="#top") Other protocols (like ftp://, mailto:, file:, etc..) A script (like href="javascript:alert('hello');") 16

Example The hreflang attribute specifies the language of the document in the link: <a href="https://www.w3schools.

17 Example The hreflang attribute specifies the language of the document in the link: <a href=" hreflang="en">w3schools< /a> Definition and Usage The hreflang attribute specifies the language of the linked document. This attribute is only used if the href attribute is set. Syntax <a hreflang="language_code"> Attribute Values Value language_c ode Description A two-letter language code that specifies the language of the linked document. To view all available language codes, go to our Language code reference. 17

18 Example A link with a media attribute: <a href="att_a_media.asp?output=print" media="print and (resolution:300dpi)"> Open media attribute page for print.</a> Definition and Usage The media attribute specifies what media/device the linked document is optimized for. This attribute is used to specify that the target URL is designed for special devices (like iphone), speech or print media. This attribute can accept several values. Only used if the href attribute is present. 18

19 Example A link with a rel attribute: <a rel="nofollow" href=" p Flights</a> Definition and Usage The rel attribute specifies the relationship between the current document and the linked document. Syntax <a rel="value"> 19

20 Attribute Values Value Description alternate Provides a link to an alternate representation of the document (i.e. print page, translated or mirror) 20 author bookmark external help license next nofollow Provides a link to the author of the document Permanent URL used for bookmarking Indicates that the referenced document is not part of the same site as the current document Provides a link to a help document Provides a link to copyright information for the document Provides a link to the next document in the series Links to an unendorsed document, like a paid link. ("nofollow" is used by Google, to specify that the Google search spider should not follow that link) noreferrer noopener prev search tag Requires that the browser should not send an HTTP referer header if the user follows the hyperlink Requires that any browsing context created by following the hyperlink must not have an opener browsing context The previous document in a selection Links to a search tool for the document A tag (keyword) for the current document

21 Example The target attribute specifies where to open the linked document: <a href=" target="_blank">vis it W3Schools</a> Definition and Usage The target attribute specifies where to open the linked document. Syntax <a target="_blank _self _parent _top framename"> 21

Attribute Values 22 Value _blank _self _parent _top framena me Description Opens the linked document in a new window or tab Opens the linked document in the same frame as it

22 Attribute Values 22 Value _blank _self _parent _top framena me Description Opens the linked document in a new window or tab Opens the linked document in the same frame as it was clicked (this is default) Opens the linked document in the parent frame Opens the linked document in the full body of the window Opens the linked document in a named frame

Example The type attribute specifies the media type of the linked document: <a href="https://www.w3schools.

23 Example The type attribute specifies the media type of the linked document: <a href=" type="text/html">w3 Schools</a> Definition and Usage The type attribute specifies the Internet media type (formerly known as MIME type) of the linked document. This attribute is only used if the href attribute is set. 23

24 Syntax <a type="media_type"> Attribute Values 24 Value Description media_type The Internet media type of the linked document. Look at IANA Media Types for a complete list of standard media types.

HTML Hyperlinks (Links)

WEB DESIGN HTML Hyperlinks (Links) The HTML tag defines a hyperlink. A hyperlink (or link) is a word, group of words, or image that you can click on to jump to another document. When you move the